class AcGameMenu {
    constructor(root) {
        this.root = root;

        this.$menu = $(`
        <div class="ac-game-menu">
            <div class="ac-game-menu-field">
                <div class="ac-game-menu-field-item ac-game-menu-field-item-single-mode">
                    单人模式
                </div>
                <br>
                <div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
                    多人模式
                </div>
                <br>
                <div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
                    设置
                </div>
                <br>
                <div class="ac-game-menu-field-item ac-game-menu-field-item-logout">
                    退出
                </div>
            </div>
        </div>
        `)

        this.root.$ac_game.append(this.$menu)
        this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode')
        this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode')
        this.$settings = this.$menu.find('.ac-game-menu-field-item-settings')
        this.$logout = this.$menu.find('.ac-game-menu-field-item-logout')

        this.choice = new LevelChoice(this)

        this.personalize = new Personalize(this)

        this.start()
    }

    start() {
        this.add_listening_events()
        this.hide()
    }

    add_listening_events() {
        let outer = this

        this.$single_mode.click(function () {
            outer.hide()
            // outer.root.playground.show('single')
            outer.choice.show()
        });
        this.$multi_mode.click(function () {
            console.log("click multi_mode")
            outer.hide()
            outer.root.playground.show('multi')
        })
        this.$settings.click(function () {
            console.log("click settings")
            outer.hide()
            outer.personalize.show()
            console.log(outer.personalize);
        })
        this.$logout.click(function () {
            $.get('/settings/logout/').then(res => {
                if (res.result === 'success') {
                    $(location).attr('href', '/')
                }
            })
        })
    }

    show() {
        this.$menu.show()
    }

    hide() {
        this.$menu.hide()
    }
}
